<!-- =========================================================================================
    File Name: Main.vue
    Description: Main layout
========================================================================================== -->


<template>
  <div class="layout--main" :class="[navbarClasses, footerClasses, {'app-page': isAppPage}]">
    <!-- <the-customizer
  <div
    class="layout--main"
    :class="[navbarClasses, footerClasses, { 'app-page': isAppPage }]"
  >
    <the-customizer
      @updateNavbar="updateNavbar"
      @updateNavbarColor="updateNavbarColor"
      :navbarType="navbarType"
      :navbarColor="navbarColor"
      :footerType="footerType"
      @updateFooter="updateFooter"
      :routerTransition="routerTransition"
      @updateRouterTransition="updateRouterTransition"
      v-if="!disableCustomizer"
      :hideScrollToTop="hideScrollToTop"
      @toggleHideScrollToTop="toggleHideScrollToTop"
    /> -->
    <!-- <vx-sidebar :sidebarItems="sidebarItems" :logo="require('@/assets/images/logo/logo.png')" title="Vuesax"
    parent=".layout--main"/>-->
    <the-navbar
      :navbarColor="navbarColor"
      :class="[
        { 'text-white': isNavbarDark && !isThemeDark },
        { 'text-base': !isNavbarDark && isThemeDark },
      ]"
      :viewContent="viewContent"
    />

    <vx-sidebar
      :sidebarItems="sidebarItems"
      :logo="projectConfig.logoSrc"
      :title="projectConfig.projectName"
      parent=".layout--main"
    />

    <div
      id="content-area"
      :class="[contentAreaClass, { 'show-overlay': bodyOverlay }]"
    >
      <div id="content-overlay"></div>

      <div class="content-wrapper">
        <div class="router-view">
          <div
            class="router-content"
            :class="{ 'mt-0': navbarType == 'hidden' }"
          >
            <!-- <nav-tab></nav-tab> -->
            <transition :name="routerTransition">
              <div
                class="router-header flex flex-wrap items-center mb-3"
                v-if="$route.meta.breadcrumb || $route.meta.pageTitle"
              >
                <!-- <div
                  class="content-area__heading"
                  :class="{
                    'pr-4 border-0 md:border-r border-t-0 border-b-0 border-l-0 border-solid border-grey-light':
                      $route.meta.breadcrumb,
                  }"
                >
                  <h2 class="mb-1">{{ routeTitle }}</h2>
                </div> -->

                <!-- BREADCRUMB 面包屑组件 -->
                <!-- <vx-breadcrumb class="ml-4 md:block hidden" v-if="$route.meta.breadcrumb" /> -->
                <TheTabbar></TheTabbar>
              </div>
            </transition>
            <div class="content-area__content">
              <back-to-top
                bottom="5%"
                visibleoffset="500"
                v-if="!hideScrollToTop"
              >
                <vs-button
                  icon-pack="feather"
                  icon="icon-arrow-up"
                  class="shadow-lg"
                />
              </back-to-top>
              <transition :name="routerTransition" mode="out-in">
                <div>
                <keep-alive>
                  <router-view
                  v-if="$route.path != '/healthMonitor/RealMonitor'"
                    @changeRouteTitle="changeRouteTitle"
                  ></router-view>
                </keep-alive>


                  <router-view
                  v-if="$route.path == '/healthMonitor/RealMonitor'"
                    @changeRouteTitle="changeRouteTitle"
                  ></router-view>
                </div>

              </transition>
            </div>
          </div>
        </div>
      </div>

      <!-- <the-footer></the-footer> -->
    </div>
  </div>
</template>

<script>
import VxSidebar from "@/layouts/components/vx-sidebar/VxSidebar.vue";
import TheTabbar from "../components/TheTabbar.vue"
import TheCustomizer from "../components/customizer/TheCustomizer.vue";
import TheNavbar from "../components/TheNavbar.vue";
import TheFooter from "../components/TheFooter.vue";
import themeConfig from "@/../themeConfig.js";
import sidebarItems from "@/layouts/components/vx-sidebar/sidebarItems.js";
import BackToTop from "vue-backtotop";
import navTab from "../components/navTab";
// const VxTour = () => import('@/components/VxTour.vue')
import projectConfig from "@/../public/project.config.js";

export default {
  data() {
    return {
      viewContent: [],
      baseUrl: process.env.BASE_URL,
      navbarType: themeConfig.navbarType || "floating",
      navbarColor: themeConfig.navbarColor || "#fff",
      footerType: themeConfig.footerType || "static",
      routerTransition: themeConfig.routerTransition || "none",
      isNavbarDark: false,
      routeTitle: this.$route.meta.pageTitle,
      // sidebarItems: sidebarItems,
      sidebarItems: sidebarItems,
      disableCustomizer: themeConfig.disableCustomizer,
      windowWidth: window.innerWidth, //width of windows
      hideScrollToTop: themeConfig.hideScrollToTop,
      disableThemeTour: themeConfig.disableThemeTour,
      steps: [
        {
          target: "#btnSidebarToggler",
          content: "Toggle Collapse Sidebar.",
        },
        {
          target: ".vx-navbar__starred-pages",
          content:
            "Create your own bookmarks. You can also re-arrange them using drag & drop.",
        },
        {
          target: ".i18n-locale",
          content: "You can change language from here.",
        },
        {
          target: ".navbar-fuzzy-search",
          content: "Try fuzzy search to visit pages in flash.",
        },
        {
          target: ".customizer-btn",
          content: "Customize template based your preference",
          params: {
            placement: "left",
          },
        },
        {
          target: ".vs-button.buy-now",
          content: "Buy this awesomeness at affordable price!",
          params: {
            placement: "top",
          },
        },
      ],
    };
  },
  watch: {
    $route() {
      this.routeTitle = this.$route.meta.pageTitle;
    },
    isThemeDark(val) {
      if (this.navbarColor == "#fff" && val) {
        this.updateNavbarColor("#10163a");
      } else {
        this.updateNavbarColor("#fff");
      }
    },
  },
  computed: {
    projectConfig() {
      return {
        logoSrc: `${this.baseUrl + projectConfig.logo}`,
        projectName: `${this.baseUrl + projectConfig.projectName}`,
      };
    },
    isAppPage() {
      if (this.$route.path.includes("/apps/")) return true;
      else return false;
    },
    isThemeDark() {
      return this.$store.state.theme == "dark";
    },
    sidebarWidth() {
      return this.$store.state.sidebarWidth;
    },
    bodyOverlay() {
      return this.$store.state.bodyOverlay;
    },
    contentAreaClass() {
      if (this.sidebarWidth == "default") return "content-area-default";
      else if (this.sidebarWidth == "reduced") return "content-area-reduced";
      else if (this.sidebarWidth) return "content-area-full";
    },
    navbarClasses() {
      return {
        "navbar-hidden": this.navbarType == "hidden",
        "navbar-sticky": this.navbarType == "sticky",
        "navbar-static": this.navbarType == "static",
        "navbar-floating": this.navbarType == "floating",
      };
    },
    footerClasses() {
      return {
        "footer-hidden": this.footerType == "hidden",
        "footer-sticky": this.footerType == "sticky",
        "footer-static": this.footerType == "static",
      };
    },
  },
  methods: {
    changeRouteTitle(title) {
      this.routeTitle = title;
    },
    updateNavbar(val) {
      if (val == "static") this.updateNavbarColor("#fff");
      this.navbarType = val;
    },
    updateNavbarColor(val) {
      this.navbarColor = val;
      if (val == "#fff") this.isNavbarDark = false;
      else this.isNavbarDark = true;
    },
    updateFooter(val) {
      this.footerType = val;
    },
    updateRouterTransition(val) {
      this.routerTransition = val;
    },
    handleWindowResize(event) {
      this.windowWidth = event.currentTarget.innerWidth;
      this.setSidebarWidth();
    },
    setSidebarWidth() {
      // if (this.windowWidth < 1200) {
      //   this.$store.commit("TOGGLE_IS_SIDEBAR_ACTIVE", false);
      //   this.$store.dispatch("updateSidebarWidth", "no-sidebar");
      //   this.disableThemeTour = true;
      // } else if (this.windowWidth < 1200) {
      //   this.$store.dispatch("updateSidebarWidth", "reduced");
      // } else {
      //   this.$store.commit("TOGGLE_IS_SIDEBAR_ACTIVE", true);
      // }
    },
    toggleHideScrollToTop(val) {
      this.hideScrollToTop = val;
    },
    // 根据视图 id 获取菜单
    getMenu(id) {
      console.log(id, "我是id");
      let view = JSON.parse(localStorage.getItem("viewData"));
      view.forEach((item, index) => {
        if (item.userViewId == id) localStorage.setItem("viewIndex", index);
      });
      if(view[
        Number(localStorage.getItem("viewIndex"))
        ].viewConfigDTO) {
        console.log('null 走不下去妈？')
      } else {
        console.log('不是null 也走不下去吗？？？')

      }
      if(view[
        Number(localStorage.getItem("viewIndex"))
        ].viewConfigDTO) {
        this.sidebarItems =
          view[
            Number(localStorage.getItem("viewIndex"))
            ].viewConfigDTO.menuGroups[1].submenu;
        this.$api.login.userView().then((res) => {
          if (res.status == 200) {
            let index = Number(localStorage.getItem("viewIndex"));
            localStorage.setItem(
              "ownId",
              res.data.data[index].deptResponses[0].code
            );
            localStorage.setItem(
              "ownInfo",
              JSON.stringify(res.data.data[index].deptResponses)
            );
            // window.location.reload()
            let path = this.$route.path;
            // console.log(path)
            let i = 0;
            // console.log(this.sidebarItems)
            this.sidebarItems.forEach((item) => {
              if (path == "/" && item.url == "/")
                window.location.reload();
              if (item.submenu && item.submenu.length)
                item.submenu.forEach((item1) => {
                  if (item1.url == path) {
                    window.location.reload();
                    console.log(item1.url);
                    i = i + 1;
                  }
                });
            });
            // console.log(i)
            if (i == 0) {
              // let newPath = this.sidebarItems[0].submenu[0].url
              // this.$router.push(newPath)
              this.$router.push("/");
            }
            // console.log(this.$route.path,'当前路由--------');
            // console.log(localStorage.getItem('ownId'),'=========ownId')
          }
        });
      } else {
        this.$vs.notify({
          text: "该视图未配置,请联系管理员",
          color: "danger",
          icon: "danger"
        });
      }

    },
    getView() {
      let strGetMine = localStorage.getItem("viewData");
      let view = JSON.parse(strGetMine);
      // console.log(view[0].viewConfigDTO.menuGroups[1], "+++++++++++");
      this.viewContent = view;
      /*if (!localStorage.getItem("viewIndex"))
        this.sidebarItems = view[0].viewConfigDTO.menuGroups[1].submenu;
      else
        this.sidebarItems =
          view[
            Number(localStorage.getItem("viewIndex"))
          ].viewConfigDTO.menuGroups[1].submenu;*/
    },
  },
  components: {
    VxSidebar,
    TheNavbar,
    TheFooter,
    TheCustomizer,
    BackToTop,
    navTab,
    TheTabbar
  },
  created() {
    this.setSidebarWidth();
    if (this.navbarColor == "#fff" && this.isThemeDark) {
      this.updateNavbarColor("#10163a");
    } else {
      this.updateNavbarColor(this.navbarColor);
    }
    this.getView();

    // console.log('当前路由',this.$route.path)
  },
};
</script>
